<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>实验1-9</title>
		<style>
			body {
				background-color: #f9f6e8;
				font-family: "SimHei", serif;
				margin: 0;
				padding: 20px;
			}

			.container {
				max-width: 900px;
				margin: 0 auto;
				text-align: center;
			}

			.title {
				color: #0056D2;
				font-size: 32px;
				margin: 20px 0;
				padding-bottom: 10px;
				border-bottom: 2px solid #ccc;
				width: 200px,auto;
			}

			.nav {
				margin: 10px 0 30px;
				font-size: 16px;
			}

			.nav .nav-item1 {
				margin: 0 1px;
				color: #0000CD;
				text-decoration: none;
				cursor: default;
			}

			.nav .nav-item2 {
				margin: 0 1px;
				color: #800080;
				text-decoration: underline;
			}

			.images {
				margin: 20px 0;
			}

			.animal-img {
				width: 320px;
				height: 320px;
				border: 1px solid #ddd;
				padding: 5px;
				margin: 0;
			}

			.footer {
				margin-top: 30px;
				color: #666;
				font-size: 14px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<h1 class="title">动物世界</h1>

			<div class="nav">
				<span class="nav-item1">首页</span>
				<span class="nav-item1">|</span>
				<span class="nav-item1">动物一族</span>
				<span class="nav-item1">|</span>
				<span class="nav-item1">百兽园</span>
				<span class="nav-item1">|</span>
				<span class="nav-item2">动物图片</span>
				<span class="nav-item1">|</span>
				<span class="nav-item2">动物论坛</span>
			</div>

			<div class="images">
				<img src="2.jpg" class="animal-img" alt="动物图片1">
				<img src="1.jpg" class="animal-img" alt="动物图片2">
			</div>

			<div class="footer">
				感谢你的光临
			</div>
		</div>
	</body>
</html>